<template>
	<div>
		<div class="lottery-container" ref="targetRef">
			<!-- 顶部 logo 区 -->
			<div class="top-logo">
				<img src="/@/assets/lottery/cwlogo.png" alt="中国福利彩票" class="cw-logo" />
			</div>

			<!-- 标题区 -->

			<!-- 投注总额区 -->
			<div class="total-bet">本期全国投注总额112142514元，其中宁夏投注额为576454元</div>

			<!-- 中奖号码区 -->
			<div class="winning-numbers">
				<h3>中奖号码</h3>
				<div class="numbers-grid">
					<span>75</span><span>63</span><span>25</span><span>32</span><span>47</span><span>80</span><span>42</span><span>06</span><span>18</span
					><span>45</span> <span>01</span><span>13</span><span>28</span><span>33</span><span>66</span><span>22</span><span>03</span><span>26</span
					><span>41</span><span>73</span>
				</div>
			</div>

			<!-- 中奖结果区 -->
			<div class="winning-results">
				<h3>中奖结果</h3>
				<table>
					<thead>
						<tr>
							<th style="width: 110px">奖级</th>
							<th style="width: 110px">全国中奖注数</th>
							<th style="width: 100px">宁夏中奖注数</th>
							<th>每注金额</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>选十中十</td>
							<td>2</td>
							<td>0</td>
							<td>5000000</td>
						</tr>
						<tr>
							<td>选十中九</td>
							<td>64</td>
							<td>0</td>
							<td>8000</td>
						</tr>
						<tr>
							<td>选十中八</td>
							<td>1189</td>
							<td>4</td>
							<td>800</td>
						</tr>
						<tr>
							<td>选十中七</td>
							<td>13663</td>
							<td>74</td>
							<td>80</td>
						</tr>
						<tr>
							<td>选十中六</td>
							<td>93383</td>
							<td>535</td>
							<td>5</td>
						</tr>
						<tr>
							<td>选十中五</td>
							<td>403159</td>
							<td>2515</td>
							<td>3</td>
						</tr>
						<tr>
							<td>选十中零</td>
							<td>302983</td>
							<td>1764</td>
							<td>2</td>
						</tr>
						<tr>
							<td>选十中零</td>
							<td>302983</td>
							<td>1764</td>
							<td>2</td>
						</tr>
						<tr>
							<td>选十中零</td>
							<td>302983</td>
							<td>1764</td>
							<td>2</td>
						</tr>
						<tr>
							<td>选十中零</td>
							<td>302983</td>
							<td>1764</td>
							<td>2</td>
						</tr>
					</tbody>
				</table>
			</div>

			<!-- 奖池金额区 -->
			<div class="jackpot">
				<h3>“选十”玩法奖池累计金额</h3>
				<p>59712604.05元</p>
			</div>

			<!-- 兑换期限区 -->
			<div class="exchange-term">
				<h3>兑换期限</h3>
				<p>本期兑奖截止日为2025年11月03日，</p>
				<p>逾期未兑奖视为弃奖，弃奖奖金纳入彩票公益金。</p>
			</div>

			<!-- 底部发行中心 -->

			<!-- 两侧灯笼装饰 -->
			<!-- <div class="lantern left-lantern">
				<img src="/@/assets/lantern.png" alt="灯笼" />
			</div>
			<div class="lantern right-lantern">
				<img src="/@/assets/lantern.png" alt="灯笼" />
			</div> -->
		</div>

		<!-- 下载按钮 -->
		<button style="position: fixed; top: 100px" @click="captureAndDownload">下载为图片</button>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, ref } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { useRoute, useRouter } from 'vue-router';
import html2canvas from 'html2canvas';

// 引用目标元素
const targetRef = ref(null);

// 截图并下载
const captureAndDownload = async () => {
	if (!targetRef.value) return;

	try {
		// 配置项（重要！）
		const options = {
			scale: 2, // 提高分辨率（默认值为设备像素比）
			useCORS: true, // 允许跨域图片
			backgroundColor: null, // 背景透明（设为 '#fff' 则为白色背景）
			logging: false, // 关闭日志
		};

		// 生成 Canvas
		const canvas = await html2canvas(targetRef.value, options);

		// Canvas 转图片
		const imageUrl = canvas.toDataURL('image/png');

		// 触发下载
		const link = document.createElement('a');
		link.href = imageUrl;
		link.download = `screenshot-${new Date().getTime()}.png`;
		link.click();
	} catch (error) {
		console.error('截图失败:', error);
	}
};

const route = useRoute();
const router = useRouter();

import axios from 'axios'; // Vue3中通常直接导入axios使用

// 响应式变量定义
const period = ref(''); // 期数
const nationalTotalAmount = ref(''); // 全国投注总额
const ningxiaAmount = ref(''); // 宁夏投注额
const winningNumbers = ref([]); // 中奖号码数组（共20个）
const results = ref([]); // 中奖结果列表
const jackpotAmount = ref(''); // 奖池金额
const exchangeDeadline = ref(''); // 兑奖截止日期

// 数据获取函数
const fetchLotteryData = async () => {
	try {
		const res = await axios.get('/api/lottery/notice'); // 直接使用导入的axios
		const data = res.data;

		// 为响应式变量赋值（通过.value访问）
		period.value = data.period;
		nationalTotalAmount.value = data.nationalTotalAmount;
		ningxiaAmount.value = data.ningxiaAmount;
		winningNumbers.value = data.winningNumbers;
		results.value = data.results;
		jackpotAmount.value = data.jackpotAmount;
		exchangeDeadline.value = data.exchangeDeadline;
	} catch (err) {
		console.error('获取开奖数据失败：', err);
	}
};

// 页面加载时
onMounted(() => {
	console.log('🚀 ~ file: index.vue:13 ~ onMounted ~ onMounted:');
	NextLoading.done();

	fetchLotteryData();
});
</script>

<style scoped>
.lottery-container {
	width: 567.65px;
	height: 1021.8px;
	/* 适配手机端，可按需调整 */
	margin: 0 auto;
	background: url('/@/assets/lottery/happy8_logo.png') no-repeat center top;
	/* 主背景图 */
	background-size: 100% 100%;
	padding: 10px;
	font-family: 'Microsoft Yahei', sans-serif;
	color: #333;
	position: relative;
	/* 用于灯笼绝对定位 */
}

/* 顶部 logo */
.top-logo {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.cw-logo {
	width: 250px;
	height: auto;
}

/* 标题区 */
.title-section {
	text-align: center;
	margin-bottom: 15px;
	margin-top: 120px;
}

.title-section h1 {
	font-size: 18px;
	margin: 5px 0;
}

.title-section h2 {
	font-size: 16px;
	margin: 5px 0;
}

.happy8-logo {
	width: 80px;
	height: auto;
	vertical-align: middle;
}

.issue {
	font-size: 14px;
	margin-top: 5px;
}

/* 投注总额 */
.total-bet {
	color: #fff;
	text-align: center;
	padding: 8px;
	border-radius: 4px;
	margin-bottom: 15px;

	margin-top: 190px;

	font-family: 'MyCustomFont';
}

/* 中奖号码区 */
.winning-numbers {
	/* 号码区背景 */
	background-size: cover;
	padding: 10px;
	margin-bottom: 15px;
	font-family: 'MyCustomFont';
}

.winning-numbers h3 {
	text-align: center;
	font-size: 16px;
	margin-bottom: 10px;
	color: #fff;
	display: inline-block;
	padding: 3px 10px;
	border-radius: 3px;
	width: 100%;
}

.numbers-grid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	/* gap: 5px; */
	width: 77%;
	margin-left: 13%;
	margin-top: -8px;
}

.numbers-grid span {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	font-size: 19px;
	font-weight: 600;
	color: #524d85;
	width: 35px;
	height: 35px;
	font-family: 'MyCustomFont';
}

/* 中奖结果区 */
.winning-results {
	/* 结果区背景 */
	background-size: cover;
	padding: 10px;
	margin-bottom: 15px;
	margin-top: -15px;
	font-family: 'MyCustomFont';
}

.winning-results h3 {
	text-align: center;
	font-size: 16px;
	margin-bottom: 10px;
	color: #fff;
	display: inline-block;
	padding: 3px 10px;
	border-radius: 3px;
	width: 100%;
	margin-top: 5px;
}

.winning-results table {
	width: 80%;
	margin-left: 11%;
	border-collapse: collapse;
	margin-top: -5px;
}

.winning-results th,
.winning-results td {
	/* border: 1px solid #ccc; */
	text-align: center;
	font-size: 12px;
	height: 23.5px;
	font-family: 'MyCustomFont';
	color: #524d85;
}

.winning-results th {
	/* background-color: #f0f0f0; */
}

/* 奖池金额区 */
.jackpot {
	/* 奖池区背景 */
	background-size: cover;
	padding: 10px;
	margin-bottom: 15px;
	text-align: center;
	margin-top: -17px;
	font-family: 'MyCustomFont';
}

.jackpot h3 {
	font-size: 16px;
	margin-bottom: 10px;
	color: #fff;
	display: inline-block;
	padding: 3px 10px;
	border-radius: 3px;
}

.jackpot p {
	font-size: 22px;
	font-weight: bold;
	font-family: 'MyCustomFont';
	color: #524d85;
	margin-top: 5px;
}

/* 兑换期限区 */
.exchange-term {
	/* 期限区背景 */
	background-size: cover;
	padding: 10px;
	margin-bottom: 15px;
	text-align: center;
	margin-top: -19px;
	font-family: 'MyCustomFont';
	color: #524d85;
}

.exchange-term h3 {
	font-size: 16px;
	margin-bottom: 10px;
	color: #fff;
	display: inline-block;
	padding: 3px 10px;
	border-radius: 3px;
}

.exchange-term p {
	font-size: 14px;
	margin: 5px 0;
}

/* 底部发行中心 */
.bottom-center {
	text-align: center;
	font-size: 14px;
	margin-top: 10px;
}

/* 两侧灯笼 */
.lantern {
	position: absolute;
	top: 20px;
	width: 40px;
}

.left-lantern {
	left: -50px;
}

.right-lantern {
	right: -50px;
}

.lantern img {
	width: 100%;
	height: auto;
}
</style>
